<template>
  <div class="searchData" v-if="interestData">
    <van-search
      background="#ebedf0"
      v-model="value"
      placeholder=""
      @search="addData"
      shape="round"
    >
      <template #left>
        <span
          class="iconfont icon-arrow-left-bold"
          @click.stop="$router.go(-1)"
          style="font-size: 24px"
        ></span>
      </template>
    </van-search>
    <van-tabs background="#ebedf0"  @click="addDanQu">
      <van-tab title="综合" class="zh">
        <div class="interest">
          <div>你可能感兴趣</div>
          <ul v-if="interestData">
            <li @click="goSongGer(interestData.artist.artists[0].id)">
              <div class="img">
                <img :src="interestData.artist.artists[0].picUrl" alt="" />
              </div>
              <div class="title">
                <div class="singger">
                  歌手 {{ interestData.artist.artists[0].name
                  }}{{ interestData.artist.artists[0].alias[0] }}
                </div>
              </div>
            </li>
            <li>
              <div class="img">
                <img
                  :src="interestData.playList.playLists[0].coverImgUrl"
                  alt=""
                />
              </div>
              <div class="title">
                <div class="singger">
                  歌单 {{ interestData.playList.playLists[0].name }}
                </div>
              </div>
            </li>
            <router-link :to="'/album?id='+interestData.album.albums[0].id" tag="li">
              <div class="img">
                <img :src="interestData.album.albums[0].picUrl" alt="" />
              </div>
              <div class="title">
                <div class="singger">
                  专辑
                  {{ interestData.album.albums[0].type }}
                  {{ interestData.album.albums[0].name }}
                </div>
              </div>
            </router-link>
          </ul>
        </div>
        <div class="danqu" v-if="interestData">
          <div class="nav">
            <div class="left">单曲</div>
            <div class="right">播放</div>
          </div>
          <ul>
            <li
              v-for="(item, index) in interestData.song.songs"
              :key="index"
              @click="setId(item.id)"
            >
              <div class="left">
                <div class="top">{{ item.name }}</div>
                <div class="bottom">{{ item.ar[0].name }}</div>
              </div>
              <div class="right">
                <van-icon
                  name="play-circle-o"
                  size="30"
                  color="rgb(170,170,170)"
                />
              </div>
            </li>
          </ul>
        </div>
        <div class="interest video" v-if="interestData">
          <div>歌单</div>
          <ul>
            <router-link
              v-for="item in interestData.playList.playLists"
              :key="item.id"
              tag="li"
              :to="'/rankItem?id=' + item.id"
            >
              <div class="img">
                <img :src="item.coverImgUrl" alt="" />
              </div>
              <div class="title">
                <div class="singger">{{ item.name }}</div>
                <div class="text">
                  {{ item.trackCount }}首,用户id{{ item.userId }},播放{{
                    item.playCount | playCountData
                  }}次
                </div>
              </div>
            </router-link>
          </ul>
        </div>
        <div class="gedan"></div>
      </van-tab>
      <van-tab title="单曲">
        <div class="danqu">
          <div class="nav">
            <div class="left">全部单曲</div>
            <div class="right">播放</div>
          </div>
          <ul>
            <li
              v-for="(item, index) in danquList"
              :key="index+'dq'"
              @click="setId(item.id)"
            >
              <div class="left">
                <div class="top">{{ item.name }}</div>
                <div class="bottom">{{ item.artists[0].name }}</div>
              </div>
              <div class="right">
                <van-icon
                  name="play-circle-o"
                  size="30"
                  color="rgb(170,170,170)"
                />
              </div>
            </li>
          </ul>
        </div>
      </van-tab>
      <van-tab title="视频">
         <ul  class="sp">
          <router-link v-for="(item,index) in sp" :key="index+'mv'" :to="'/mv?id='+item.vid" tag="li">
            <div class="img">
              <img :src="item.coverUrl" alt="" width="150px" height="100%">
            </div>
            <div class="txt">
              <div class="name">{{item.title}}</div>
              <div class="time-num">{{item.creator[0].userName}}</div>
              <div class="time-num">{{item.playTime|playCountData}}</div>
            </div>
          </router-link>
        </ul>
      </van-tab>
      <van-tab title="歌手">
        <ul class="gs">
           <li @click="goSongGer(item.id)" v-for="(item,index) in songS" :key="'gs'+index">
              <div class="img">
                <img :src="item.picUrl" alt="" />
              </div>
              <div class="title">
                <div class="singger">
                  歌手 {{ item.name
                  }}
                </div>
              </div>
            </li>
        </ul>
      </van-tab>
      <van-tab title="播单">内容 2</van-tab>
      <van-tab title="用户">内容 3</van-tab>
      <van-tab title="电子">内容 3</van-tab>
      <van-tab title="民谣">内容 3</van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getSearchSuggest } from "../api/search";
export default {
  data() {
    return {
      value: "",
      interestData: null,
      danquList:null,
      songS:null,
      sp:null
    };
  },
  methods: {
    addData() {
      console.log(this.value)
      getSearchSuggest({
        keywords: this.value,
        type: 1018,
      }).then((data) => {
        console.log(data);
        this.interestData = data.result;
        
      });
    },
    addDanQu(name, title){
      if(title=='单曲'){
         getSearchSuggest({
        keywords: this.value,
        type: 1,
      }).then((data) => {
        console.log(data);
        this.danquList = data.result.songs;
        console.log(this.danquList)
      });
      }
      
      if(title=='歌手'){
        getSearchSuggest({
        keywords: this.value,
        type: 100,
      }).then((data) => {
        console.log(data);
        this.songS = data.result.artists;
        console.log(this.songS)
      });
      }
      if(title=="视频"){
         getSearchSuggest({
        keywords: this.value,
        type: 1014,
      }).then((data) => {
        console.log(data);
        this.sp = data.result.videos;
        console.log(this.sp)
      });
      }
    },
    setId(id) {
      this.$emit("get-player-id", id);
      //  this.$emit("get-play-all-id",this.$route.query.id);//传递歌单id
      console.log(id);
    },
    goSongGer(id) {
      console.log(id);
      this.$router.push({ path: "songGerItem", query: { id } });
    },
  },
  // 过滤器
  filters: {
    playCountData(value) {
      let w = value > 10000 ? value / 10000 : value; // 万计算
      let y = w > 10000 ? parseInt(w / 10000) + "亿" : parseInt(w) + "万"; //亿计算
      return y;
    },
  },
  created() {
    // console.log(this.$route.query.value);
    this.value = this.$route.query.value;
    getSearchSuggest({
      keywords: this.$route.query.value,
      type: 1018,
    }).then((data) => {
      console.log(data);
      this.interestData = data.result;
    });
  },
  watch: {
    // value() {
    //   getSearchSuggest({
    //     keywords: this.value,
    //     type: 1018,
    //   }).then((data) => {
    //     console.log(data);
    //     this.interestData = data.result;
    //   });
    // },
  },
};
</script>

<style lang="less">
.searchData {
  background-image: linear-gradient(#ebedf0, rgb(243, 235, 235));
  .interest {
    margin: 10px;
    background-color: #fff;
    padding: 10px;
    border-radius: 8px;
    li {
      display: flex;
      align-items: center;
      .img {
        width: 60px;
        height: 60px;
        border-radius: 8px;
        overflow: hidden;
        background-color: red;
        margin: 10px 0;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .title {
        .singger {
          margin-left: 20px;
          width: 250px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .text {
          font-size: 14px;
          margin-left: 20px;
          color: rgb(219, 157, 157);
        }
      }
    }
  }
  .danqu {
    margin: 10px;
    background-color: #fff;
    padding: 10px;
    border-radius: 8px;
    .nav {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    li {
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid #ccc;
      align-items: center;
      .left {
        .top {
          color: #000;
          font-weight: 400;
        }
        .bottom {
          font-size: 14px;
          color: #666666;
        }
      }
    }
  }
  .gs{
    li {
      display: flex;
      align-items: center;
      .img {
        width: 60px;
        height: 60px;
        border-radius: 8px;
        overflow: hidden;
        background-color: red;
        margin: 10px 0;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .title {
        .singger {
          margin-left: 20px;
          width: 250px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .text {
          font-size: 14px;
          margin-left: 20px;
          color: rgb(219, 157, 157);
        }
      }
    }
  }
  .sp {
      li {
        display: flex;
      padding: 10px 0;
      border-bottom: 1px solid #ccc;
      align-items: center;
        .img {
          width: 150px;
          height: 100px;
          flex-shrink: 0;
          img{
            width: 100%;
            height: 100%;
          }
        }
         .txt {
        margin-left: 20px;
        .name {
          font-size: 16px;
          color: rgb(48, 45, 45);
        }
        .time-num {
          font-size: 14px;
          color: rgb(185, 185, 185);
        }
      }
      }
    }
}
</style>